<template>
  <el-table max-height="450" :data="functions">
    <el-table-column label="功能标识" align="center" prop="id"/>
    <el-table-column label="功能名称" align="center" prop="name"/>
    <el-table-column label="是否异步" align="center" prop="async">
      <template slot-scope="scope">
        <dict-tag :options="dict.type.iot_is_async" :value="scope.row.async"/>
      </template>
    </el-table-column>
    <el-table-column label="描述" align="center" prop="description"/>
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="text"
          icon="el-icon-help"
          @click="handleProtocolStandby(scope.row)"
          v-hasPermi="['iot:product:edit']"
        >协议
        </el-button>
        <el-button
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="handleUpdate(scope.row)"
          v-hasPermi="['iot:product:edit']"
        >编辑
        </el-button>
        <el-popconfirm
          title="确认删除？"
          @confirm="handleDelete(scope.row)"
        >
          <el-button
            style="margin-left: 10px"
            size="mini"
            type="text"
            icon="el-icon-delete"
            v-hasPermi="['iot:product:remove']"
            slot="reference"
          >删除
          </el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>

import { mapState } from 'vuex'
import { updateProduct } from '@/api/iot/product'

export default {
  name: 'FunctionsTable',
  // 字典
  dicts: [
    // 是否异步
    'iot_is_async'
  ],
  data() {
    return {
      functions: []
    }
  },
  computed: {
    ...mapState({
      productData: state => state.product.productData
    })
  },

  watch: {
    productData(data) {
      let metadata = JSON.parse(data.metadata)
      this.functions = metadata.functions
    }
  },

  created() {
    let metadata = JSON.parse(this.productData.metadata)
    this.functions = metadata.functions
  },

  methods: {
    /** 更新按钮操作 */
    handleUpdate(row) {
      this.$store.dispatch('EditProductFunctions', row)
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$store.dispatch('DeleteProductMetadata',{ type: 'functions' , id: row.id })
      this.$store.dispatch('DeleteProductProtocolStandby',row.id)
    },

    /** 协议支持按钮操作 */
    handleProtocolStandby(row) {
      this.$store.dispatch('ViewProductProtocolStandby', { id: row.id, thingType: 'functions' })
    }
  }
}
</script>

<style scoped>
</style>
